<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/user.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../angularjs/index.css">
>
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="app">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">金证信贷系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="个人中心首页.html"><span></span>首页</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: {{nickname}}</a></li>
            <li><a href="javascript:void(0)" @click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>
    <!--个人中心-->
    <div class="wrapper wbgcolor">
        <div class="w1200 personal">
            <div id="personal-left" class="personal-left">
                <ul>
                    <li class=""><span><a href="个人中心首页.html"><i class="dot dot1"></i>账户总览</a></span></li>
                    <li class=""><span><a href="个人中心-账户设置.html"><i class="dot dot02"></i>账户设置</a> </span></li>
                    <li class="pleft-cur"><span><a href="个人中心-借款记录.html"><i class="dot dot02"></i>查看借款记录</a> </span>
                    </li>
                    <li class=""><span><a href="个人中心-查看申请记录.html"><i class="dot dot02"></i>查看申请记录</a> </span></li>

                    <li class=""><span><a href="../applyforaloan.html"><i class="dot dot02"></i>申请贷款</a> </span></li>
                </ul>
            </div>
            <div class="personal-main">
                <div class="personal-investnote">
                    <h3><i>借款记录</i></h3>
                    <div class="investnote-money"> <span><b class="fb">累计投资</b><br>
          <i>0.00</i> 元 </span> <span><b class="fb">累计收益</b><br>
          <i class="c-pink">0.00</i> 元 </span> <span><b class="fb">待收本金</b><br>
          <i>0.00</i> 元 </span> <span class="none"><b class="fb">待收收益</b><br>
          <i>0.00</i> 元 </span></div>
                    <form id="form" name="form" method="post" action="">

                        <div class="invest-tab">
                            <ul>
                                <li :class="{on:isActive1}" @click="CisActive1()"><span><a title="投标中">所有</a> </span>
                                </li>
                                <li :class="{on:isActive2}" @click="CisActive2()"><a>已还清</a></li>
                                <li :class="{on:isActive3}" @click="CisActive3()"><a @click="unfinished()">未还清 </a></li>
                            </ul>
                        </div>
                        <div class="investnote-list ">
                            <table class="table table-hover investnote-contitle text-center">
                                <tr class="">
                                    <td>审批时间</td>
                                    <td>借款金额</td>
                                    <td>币种</td>
                                    <td>借款期限</td>
                                    <td>状态</td>
                                    <td>操作</td>
                                </tr>
                                <tr v-if="Result.code=='200' && b.status=='2' " v-for="b in Result.data">
                                    <td class="col-lg-3">{{b.updateTime}}</td>

                                    <td class="col-lg-2">{{b.amount}}</td>
                                    <td class="col-lg-1">{{b.currency}}</td>
                                    <td class="col-lg-1">{{b.period}}</td>
                                    <td class="col-lg-3" v-if="b.repaymentStatus=='0'" style="color: #0fa24e">已结清</td>
                                    <td class="col-lg-3" v-else-if="b.repaymentStatus=='1'" style="color: #ff0000">未结清
                                    </td>
                                    <td class="col-lg-2">
                                        <el-link type="primary" @click="show(b.borrowerInfoId)">查看</el-link>
                                    </td>
                                </tr>
                                <tr v-if="Result.code=='333'">
                                    <td colspan="5" style="color: #ff08d9">暂无记录</td>
                                </tr>
                            </table>
                            <!--<div class=""><span class="investnote-w1 fb">借款时间</span> <span-->
                            <!--class="investnote-w2 fb">项目</span> <span class="investnote-w3 fb">状态</span> <span-->
                            <!--class="investnote-hbw4 fb">我的借款</span> <span class="investnote-hbw5 fb">我的还款</span>-->
                            <!--<span class="investnote-hbw6 fb">操作</span></div>-->
                            <!--<ul>-->
                            <!--<li><span class="investnote-w1"></span><span-->
                            <!--class="investnote-w2">{{b.moneyUse}}</span><span-->
                            <!--class="investnote-w3">{{b.repaymentStatus}}</span>{{b.repaymentStatus}}<span class="investnote-hbw4"></span>-->
                            <!--<span-->
                            <!--class="investnote-hbw5">{{b.amount}}</span> <span class="investnote-hbw6"><a-->
                            <!--href="#">删除</a></span></li>-->

                            <!--<div style=" width:760px;height:200px;padding-top:100px; text-align:center;color:#d4d4d4; font-size:16px;">
                                               <img src="images/nondata.png" width="60" height="60"><br><br>
                                                 暂无投资记录</div>-->
                            </ul>
                        </div>
                        </span>
                    </form>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!--网站底部-->

</div>
</body>


</html>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            Result: {},
            repaymentStatus: true,
            isActive1: true,
            isActive2: false,
            isActive3: false,
            nickname: null
        },
        methods: {
            CisActive1: function () {
                //选项卡 所有
                this.isActive1 = true;
                this.isActive2 = false;
                this.isActive3 = false;
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:10088/user/allBorrowerInfo',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(function (response) {
                    vue.Result = response.data;
                    console.log(vue.Result.code)
                })
            },
            CisActive2: function () {
                //选项卡 结清
                this.isActive1 = false;
                this.isActive2 = true;
                this.isActive3 = false;
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:10088/user/jieQingBorrowerInfo',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(function (response) {
                    vue.Result = response.data;
                    console.log(vue.Result.code)
                })
            },
            CisActive3: function () {
                //选项卡 未结清
                this.isActive1 = false;
                this.isActive2 = false;
                this.isActive3 = true;
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:10088/user/notQingBorrowerInfo',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(function (response) {
                    vue.Result = response.data;
                    console.log(vue.Result.code)
                })
            },
            init: function () {
                //初始化方法
                // axios.get("http://127.0.0.1:10088/user/allBorrowerInfo?token=" + localStorage.getItem("token"))
                vue.nickname=localStorage.getItem("nickname");
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:10088/user/allBorrowerInfo1',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(function (response) {
                    vue.Result = response.data;
                    console.log(vue.Result.data)
                })
            },
            show: function (borrowerInfoId) {

                //获取账单详情表
                // axios.post("http://127.0.0.1:10088/user/showBorrowInfo?token=" + localStorage.getItem("token") + "billFormId=" + billFormId)
                localStorage.setItem("borrowerInfoId", borrowerInfoId);
                location.href = "个人中心-借款记录-查看详情.html";
                /*axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getbBillForm',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token"),
                        billFormId: billFormId
                    }
                })
                    .then(function (response) {
                        localStorage.setItem("billFormId", billFormId);
                        location.href = "个人中心-借款记录-查看详情.html";
                    })*/

            }
        ,
        logout: function () {
            //注销
            localStorage.removeItem("token");
            location.href="login.html"
        }
        }
    })
    vue.init();
</script>